<style scoped lang="less">
  @import "./index.less";
</style>
<template>
  <!-- 按钮 -->
  <ul class="m-button">
    <li v-for="item in listData" :key="item.id">
      <div class="u-label">{{ item.label }}</div>
      <mat-button
        v-for="it in item.btns"
        :key="it.id"
        :type="it.type"
        :plain="!!it.plain"
        :disabled="!!it.disabled"
        :color="!it.color ? '' : it.color"
        :icon="!it.icon ? '' : it.icon"
      >
        {{ it.value }}
      </mat-button>
    </li>
  </ul>
  <mat-button type="success" @click="onOpenHttp">测试http</mat-button>
</template>
<script lang="ts">
  import { defineComponent } from "vue";
  import { useWebData } from "./hooks";

  export default defineComponent({
    setup() {
      const { listData, request } = useWebData();

      const onOpenHttp = () => {
        request({
          url: "/user/login",
          method: "post",
          data: { username: "admin", password: "123456" }
        }).then((res: any) => {
          console.log(res);
        });
      };
      return { listData, onOpenHttp };
    }
  });
</script>
